<template>
  <div class="w100-h100 flex-center bg-blue-color">
    <div v-if="showData.length > 0" class="content bg-blue-color" id="content">
      <div v-for="(itme1, index1) in showData" :key="'row'+index1" class="row">
        <div v-for="(item2, index2) in showData[index1]" :key="'rowItem'+index1+index2" class="rowItem">
          <div v-for="(item3, index3) in showData[index1][index2]" :key="'rowItemColumn'+index1+index2+index3" class="rowItemColumn">
            {{showData[index1][index2][index3].num}}
            <span class="height-num">
              <i v-for="i in showData[index1][index2][index3].highNum">.</i>
            </span>
          </div>
        </div>
      </div>
    </div>
    <div class="setting-box">
      <div class="setting-box-item">
        <span class="font-white-color-trans font-size13">每节拍数:</span>&nbsp;
        <input v-model="setting.barNum" type="text">
      </div>
      <div class="setting-box-item">
        <span class="font-white-color-trans font-size13">是否排序</span>&nbsp;
        <van-switch
          v-model="setting.isSort"
          size="22"
          active-color="#284e69"/>
      </div>
      <div class="setting-box-item" style="margin-top:30px;">
        <van-button @click="flushBySetting()" plain type="primary" color="#242f38" size="small">重新计算</van-button>
         <!-- <van-button @click="toPicture()" style="margin-top:8px;" plain type="primary" color="#242f38" size="small">生成图片</van-button> -->
        <!-- <van-button @click="toPicture()" style="margin-top:8px;" plain type="primary" color="#242f38" size="small">截图</van-button> -->
      </div>
    </div>
  </div>
</template>
<script>
import { Button, Toast, Field, CellGroup, Switch } from 'vant';
import common from '../assets/js/common';
import html2canvas from 'html2canvas';
export default{
  components: {
    [Button.name]: Button,
    [Field.name]: Field,
    [CellGroup.name]: CellGroup,
    [Switch.name]: Switch
  },
  data(){
    return {
      params: {}, // 保存需要导出的数据
      data: [], // 已格式化数据
      showData: [], // 已格式化数据
      dealData: [], // 已排序的数据
      setting: {
        isSort: false, // 同一拍是否排序
        barNum: 4, // 每小节拍数 默认：4拍
        deviation: {
          deviation: 30,  // 每拍误差时长
          key: "divTime",
        }
        // barItemTime: -1, // 每拍时长 -1为动态赋值 (均值 / barNum)
        // barItemDeviation: -1, //   -1为动态赋值(每拍时长 / 2)
      },
    }
  },
  created(){
    this.initData();
  },
  methods:{
    initData(){
      if(this.$route.params.data){
        this.params = JSON.parse(this.$route.params.data);
      }else{
        this.$router.go(-1);
      }
      let dataTemp = this.removeDeviation(this.params.data, this.setting.deviation);
      this.data = dataTemp;
      this.flushBySetting();
    },
    // 去误差
    removeDeviation(data, options = null){
      let result = [];
      // 数据检验
      if(!data || data.length < 1){ return result; }
      let pass = true;
      data.forEach(item => {
        if(item.divTime > 0) {
          pass = false;
          return;
        }
      });
      if(pass){
        result.push(data);
        return result;
      }
      // 设置参数
      let deviation = 50; // 误差默认50毫秒
      let key = "divTime";  // 通过数组对象内哪个key来去误差
      if(options){
        if(options.deviation == 0){ result.push(data); return result;}
        if(options.deviation > 0){ deviation = options.deviation; }
        if(options.key != undefined){ key = options.key; }
      }
      // 处理
      let dataTemp = JSON.parse(JSON.stringify(data));
      let countTime = 0;  // 已累计的误差
      let resultItemTemp = [];  // 已累计的item
      for(let i=0; i<dataTemp.length; i++){
        if(dataTemp[i][key] >= deviation){
          if(resultItemTemp.length > 0){
            result.push(resultItemTemp);
          }
          resultItemTemp = [];
          resultItemTemp.push(dataTemp[i]);
          countTime = 0;
        }else{
          resultItemTemp.push(dataTemp[i]);
          countTime += dataTemp[i][key];
          if(countTime >= deviation){
            result.push(resultItemTemp);
            resultItemTemp = [];
            countTime = 0;
          }
        }
      }
      result.push(resultItemTemp);
      return result;
    },
    flushBySetting(){
      let dataTemp = JSON.parse(JSON.stringify(this.data));
      if(this.setting.isSort){
        dataTemp.map(item => {
          return item.sort((a, b) => {
            return a.id - b.id;
          });
        });
      }
      this.showData = common._divArray(dataTemp, this.setting.barNum);
    },
    toPicture(){
      // html2canvas(document.getElementById('content')).then(function(canvas) {
      //   document.body.appendChild(canvas);
      // });
    }
  }
}
</script>
<style scoped>
.content{
  /* margin: 0 auto; */
  text-align: center;
  width: 70%;
  height: 90%;
  padding: 20px;
  border: 2px solid rgba(255, 255, 255, 0.603);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  overflow-y: auto;
  font-weight: 600;
  font-size: 18px;
}
.content .row{
  display: flex;
  flex-direction: row;
  border-left: 2px solid rgb(42, 58, 68);
  padding: 10px 0px;
  margin: 8px 0px;
}
.content .row:last-child{
  border-right: 2px solid rgb(42, 58, 68);
}
.content .rowItem{
  display: flex;
  flex-direction: column;
}
.content .rowItemColumn{
  width: 40px;
  line-height: 40px;
  position: relative;
}
.height-num{
  width: 100%;
  height: 10px;
  line-height: 6px;
  position: absolute;
  text-align: center;
  top: -4px;
  left: 0px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.setting-box{
  width: 10%;
  margin: 15px;
  padding: 8px;
}
.setting-box-item{
  margin-top: 5px;
}
.setting-box input{
  color: white;
  text-align: center;
  width: 50px;
  background-color: rgb(80, 97, 112, 0);
  border-top: 0px;
  border-left: 0px;
  border-right: 0px;
  border-bottom: 1px solid white;
}
</style>